<template>
  <view class="profile-container">
    <!-- 用户信息头部 -->
    <view class="profile-header">
      <!-- 背景装饰 -->
      <view class="header-bg">
        <view class="bg-circle circle-1"></view>
        <view class="bg-circle circle-2"></view>
        <view class="bg-circle circle-3"></view>
      </view>
      
      <!-- 已登录状态 -->
      <view class="user-info" v-if="isLoggedIn">
        <view class="avatar-section" @click="changeAvatar">
          <view class="avatar-ring">
            <u-avatar :src="userInfo.avatarUrl || '/static/icons/default-avatar.png'" size="100"></u-avatar>
          </view>
          
        </view>
        
        <view class="user-detail">
          <view class="user-name-row">
            <text class="username">{{ userInfo.username || '未设置' }}</text>
          <!--  <view class="identity-badge" :class="'badge-' + identityStatus">
              <u-icon name="medal-fill" size="16" color="white"></u-icon>
              <text class="badge-text">{{ identityStatusText }}</text>
            </view> -->
          </view>
         
         
        </view>
      </view>
      
      <!-- 未登录状态 -->
      <view class="user-info-guest" v-else>
        <view class="guest-avatar">
          <u-icon name="account-fill" size="80" color="rgba(255,255,255,0.5)"></u-icon>
        </view>
        <view class="guest-info">
          <text class="guest-title">未登录</text>
          <text class="guest-subtitle">登录后体验更多功能</text>
          <button class="login-btn" @click="goToLogin">
            立即登录
          </button>
        </view>
      </view>
      
      <!-- 教员统计数据 -->
      <view class="profile-stats" v-if="isLoggedIn && isTeacher">
        <view class="stats-card">
          <view class="stat-item">
            <view class="stat-icon-wrapper" style="background: linear-gradient(135deg, #4CAF50, #66BB6A);">
              <u-icon name="checkmark-circle-fill" size="32" color="white"></u-icon>
            </view>
            <view class="stat-content">
              <text class="stat-number">{{ teacherStats.orderCount || 0 }}</text>
              <text class="stat-label">完成订单</text>
            </view>
          </view>
          
          <view class="stat-divider"></view>
          
          <view class="stat-item">
            <view class="stat-icon-wrapper" style="background: linear-gradient(135deg, #FFB74D, #FFA726);">
              <u-icon name="star-fill" size="32" color="white"></u-icon>
            </view>
            <view class="stat-content">
              <text class="stat-number">{{ teacherStats.rating || 0 }}</text>
              <text class="stat-label">评分</text>
            </view>
          </view>
          
          <view class="stat-divider"></view>
          
          <view class="stat-item">
            <view class="stat-icon-wrapper" style="background: linear-gradient(135deg, #42A5F5, #2196F3);">
              <u-icon name="account-fill" size="32" color="white"></u-icon>
            </view>
            <view class="stat-content">
              <text class="stat-number">{{ teacherStats.studentCount || 0 }}</text>
              <text class="stat-label">服务学员</text>
            </view>
          </view>
          
          <view class="stat-divider"></view>
          
          <view class="stat-item">
            <view class="stat-icon-wrapper" style="background: linear-gradient(135deg, #EF5350, #E53935);">
              <u-icon name="integral-fill" size="32" color="white"></u-icon>
            </view>
            <view class="stat-content">
              <text class="stat-number">¥{{ teacherStats.earnings || 0 }}</text>
              <text class="stat-label">总收入</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 家长统计数据 -->
      <view class="profile-stats" v-else-if="isLoggedIn">
        <view class="stats-card">
          <view class="stat-item">
            <view class="stat-icon-wrapper" style="background: linear-gradient(135deg, #FF6B6B, #FF8E8E);">
              <u-icon name="file-text-fill" size="32" color="white"></u-icon>
            </view>
            <view class="stat-content">
              <text class="stat-number">{{ parentStats.demandCount || 0 }}</text>
              <text class="stat-label">发布需求</text>
            </view>
          </view>
          
          <view class="stat-divider"></view>
          
          <view class="stat-item">
            <view class="stat-icon-wrapper" style="background: linear-gradient(135deg, #4CAF50, #66BB6A);">
              <u-icon name="calendar-fill" size="32" color="white"></u-icon>
            </view>
            <view class="stat-content">
              <text class="stat-number">{{ parentStats.orderCount || 0 }}</text>
              <text class="stat-label">预约订单</text>
            </view>
          </view>
          
          <view class="stat-divider"></view>
          
          <view class="stat-item">
            <view class="stat-icon-wrapper" style="background: linear-gradient(135deg, #FFB74D, #FFA726);">
              <u-icon name="heart-fill" size="32" color="white"></u-icon>
            </view>
            <view class="stat-content">
              <text class="stat-number">{{ parentStats.favoriteCount || 0 }}</text>
              <text class="stat-label">收藏教员</text>
            </view>
          </view>
          
          <view class="stat-divider"></view>
          
          <view class="stat-item">
            <view class="stat-icon-wrapper" style="background: linear-gradient(135deg, #42A5F5, #2196F3);">
              <u-icon name="chat-fill" size="32" color="white"></u-icon>
            </view>
            <view class="stat-content">
              <text class="stat-number">{{ parentStats.reviewCount || 0 }}</text>
              <text class="stat-label">评价次数</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
 
    <!-- 我的订单 -->
    <view class="order-section">
      <view class="section-header">
        <view class="header-left">
          <u-icon name="order" size="36" color="#3cc51f"></u-icon>
          <text class="section-title">我的订单</text>
        </view>
        <view class="header-right" @click="goToOrders">
          <text class="more-text">查看全部</text>
          <u-icon name="arrow-right" size="14" color="#999"></u-icon>
        </view>
      </view>
      
      <view class="order-list" v-if="recentOrders.length > 0">
        <view 
          class="order-card"
          v-for="order in recentOrders"
          :key="order.id"
          @click="goToOrderDetail(order.id)"
        >
          <view class="order-header">
            <view class="order-info">
              <text class="order-no">订单号：{{ order.orderNo }}</text>
              <u-tag 
                :text="order.statusText" 
                :type="getOrderTagType(order.status)"
                size="mini"
              ></u-tag>
            </view>
          </view>
          <view class="order-content">
            <u-avatar :src="order.teacherAvatar" size="50"></u-avatar>
            <view class="content-detail">
              <text class="teacher-name">{{ order.teacherName }}</text>
              <text class="subject-info">{{ order.subject }} · {{ order.totalHours }}课时</text>
            </view>
            <view class="order-amount">
              <text class="amount">¥{{ order.totalAmount }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <view class="empty-order" v-else>
        <u-icon name="list" size="60" color="#ccc"></u-icon>
        <text class="empty-text">暂无订单</text>
      </view>
    </view>
    
    <!-- 功能菜单 -->
    <view class="menu-section">
      <!-- 基础功能 -->
      <view class="menu-group">
        <view class="group-header">
          <u-icon name="account-fill" size="36" color="#3cc51f"></u-icon>
          <text class="group-title">个人信息</text>
        </view>
        <view class="menu-list">
          <view class="menu-item" @click="goToEditProfile">
            <view class="menu-left">
              <u-icon name="edit-pen-fill" size="36" color="#666"></u-icon>
              <text class="menu-text">编辑资料</text>
            </view>
            <u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
          </view>
          <view class="menu-item" @click="changePassword">
            <view class="menu-left">
              <u-icon name="lock" size="36" color="#666"></u-icon>
              <text class="menu-text">修改密码</text>
            </view>
            <u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
          </view>
        </view>
      </view>
      
      <!-- 教员功能 -->
      <view class="menu-group" v-if="isTeacher">
        <view class="group-header">
          <u-icon name="plus-people-fill" size="36" color="#3cc51f"></u-icon>
          <text class="group-title">教员功能</text>
        </view>
        <view class="menu-list">
          <view class="menu-item" @click="goToTeacherApply">
            <view class="menu-left">
              <u-icon name="plus-circle" size="36" color="#666"></u-icon>
              <text class="menu-text">教员申请</text>
            </view>
            <u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
          </view>
          
         <!-- <view class="menu-item" @click="goToSchedule">
            <view class="menu-left">
              <u-icon name="calendar" size="36" color="#666"></u-icon>
              <text class="menu-text">时间管理</text>
            </view>
            <u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
          </view> -->
        </view>
      </view>
      
      <!-- 通用功能 -->
      <view class="menu-group">
        <view class="group-header">
          <u-icon name="setting" size="36" color="#3cc51f"></u-icon>
          <text class="group-title">设置</text>
        </view>
        <view class="menu-list">
          <view class="menu-item" @click="showAbout">
            <view class="menu-left">
              <u-icon name="info-circle" size="36" color="#666"></u-icon>
              <text class="menu-text">关于我们</text>
            </view>
            <u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
          </view>
          <view class="menu-item" @click="showFeedback">
            <view class="menu-left">
              <u-icon name="coupon-fill" size="36" color="#666"></u-icon>
              <text class="menu-text">意见反馈</text>
            </view>
            <u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
          </view>
        
        </view>
      </view>
      
      <!-- 退出登录 -->
      <view class="logout-section">
        <u-button 
          type="error" 
          plain
          :custom-style="logoutButtonStyle"
          @click="handleLogout"
        >
          退出登录
        </u-button>
      </view>
    </view>
    
    <!-- 修改密码弹窗 -->
    <u-popup v-model="showPasswordModal" mode="center" border-radius="20">
      <view class="password-modal">
        <view class="modal-header">
          <text class="modal-title">修改密码</text>
          <u-icon name="close" @click="showPasswordModal = false" size="24" color="#999"></u-icon>
        </view>
        <u-form :model="passwordForm" ref="passwordFormRef">
          <u-form-item label="原密码" prop="oldPassword">
            <u-input 
              v-model="passwordForm.oldPassword" 
              placeholder="请输入原密码"
              password
              :border="true"
              border-color="#e4e7ed"
            ></u-input>
          </u-form-item>
          <u-form-item label="新密码" prop="newPassword">
            <u-input 
              v-model="passwordForm.newPassword" 
              placeholder="请输入新密码(6-20位)"
              password
              :border="true"
              border-color="#e4e7ed"
            ></u-input>
          </u-form-item>
          <u-form-item label="确认密码" prop="confirmPassword">
            <u-input 
              v-model="passwordForm.confirmPassword" 
              placeholder="请再次输入新密码"
              password
              :border="true"
              border-color="#e4e7ed"
            ></u-input>
          </u-form-item>
        </u-form>
        <view class="modal-buttons">
          <u-button 
            type="info" 
            plain 
            @click="showPasswordModal = false"
            :custom-style="{ 
              borderRadius: '25rpx',
              marginRight: '20rpx',
              flex: '1'
            }"
          >
            取消
          </u-button>
          <u-button 
            type="primary" 
            :loading="passwordLoading"
            @click="submitPasswordChange"
            :custom-style="{ 
              borderRadius: '25rpx',
              backgroundColor: '#3cc51f',
              borderColor: '#3cc51f',
              flex: '1'
            }"
          >
            确定
          </u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getUserInfo, logout, isTeacher } from '@/utils/auth'
import { getUserProfile, getIdentityStatus, uploadAvatar, getUserStats } from '@/api/user'
import { getMyOrders } from '@/api/order'
import { changePassword } from '@/api/auth'

export default {
  data() {
    return {
      isLoggedIn: false, // 登录状态
      userInfo: {
        username: '',
        mobile: '',
        avatarUrl: '',
        createdAt: null
      },
      identityStatus: '',
      teacherStats: {
        orderCount: 0,
        rating: 0,
        studentCount: 0,
        earnings: 0
      },
      parentStats: {
        demandCount: 0,
        orderCount: 0,
        favoriteCount: 0,
        reviewCount: 0
      },
      recentOrders: [],
      unreadCount: 5,
      showPasswordModal: false,
      passwordLoading: false,
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      logoutButtonStyle: {
        borderRadius: '25rpx',
        height: '88rpx',
        margin: '40rpx 0',
        fontSize: '32rpx'
      }
    }
  },
  
  computed: {
    isTeacher() {
      return isTeacher() || true // 临时设为true用于演示
    },
    
    identityStatusText() {
      const statusMap = {
        'NOT_SUBMITTED': '未提交',
        'PENDING': '审核中',
        'APPROVED': '已认证',
        'REJECTED': '审核失败'
      }
      return statusMap[this.identityStatus] || '未知'
    },
    
    identityStatusType() {
      const typeMap = {
        'NOT_SUBMITTED': 'info',
        'PENDING': 'warning',
        'APPROVED': 'success',
        'REJECTED': 'error'
      }
      return typeMap[this.identityStatus] || 'info'
    }
  },
  
  onLoad() {
    this.loadUserInfo()
  },
  
  onShow() {
    this.loadUserInfo()
  },
  
  onPullDownRefresh() {
    this.loadUserInfo()
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  },
  
  methods: {
    async loadUserInfo() {
      try {
        // 检查是否登录
        const token = uni.getStorageSync('edu_token')
        if (!token) {
          this.isLoggedIn = false
          return
        }
        
        this.isLoggedIn = true
        
        const localUserInfo = getUserInfo()
        if (localUserInfo) {
          this.userInfo = { ...this.userInfo, ...localUserInfo }
        }
        
        // 获取完整的用户信息
        const profileResponse = await getUserProfile()
        if (profileResponse.code === 200 && profileResponse.data) {
          this.userInfo = { ...this.userInfo, ...profileResponse.data }
          
          // 如果有身份认证状态，更新它
          if (profileResponse.data.identityStatus) {
            this.identityStatus = profileResponse.data.identityStatus
          }
        }
        
        // 加载统计数据
        await this.loadStats()
        
        // 加载最近的订单
        await this.loadRecentOrders()
        
      } catch (error) {
        console.error('加载用户信息失败:', error)
        // 如果是401错误，说明token失效，跳转到登录页
        if (error.statusCode === 401) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          })
          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/auth/login'
            })
          }, 1500)
        }
      }
    },
    
    async loadStats() {
      try {
        const response = await getUserStats()
        if (response.code === 200 && response.data) {
          const stats = response.data
          
          if (this.isTeacher) {
            this.teacherStats = {
              orderCount: stats.completedOrderCount || 0,
              rating: parseFloat(stats.rating) || 0,
              studentCount: stats.studentCount || 0,
              earnings: parseFloat(stats.earnings) || 0
            }
          } else {
            this.parentStats = {
              demandCount: stats.demandCount || 0,
              orderCount: stats.orderCount || 0,
              favoriteCount: stats.favoriteCount || 0,
              reviewCount: stats.reviewCount || 0
            }
          }
        }
      } catch (error) {
        console.error('加载统计数据失败:', error)
      }
    },
    
    async loadRecentOrders() {
      try {
        const response = await getMyOrders({ page: 1, size: 3 })
        if (response.code === 200 && response.data) {
          this.recentOrders = response.data.list || []
        }
      } catch (error) {
        console.error('加载订单列表失败:', error)
      }
    },
    
    changeAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: async (res) => {
          try {
            uni.showLoading({ title: '上传中...' })
            
            const response = await uploadAvatar(res.tempFilePaths[0])
            if (response.code === 200 && response.data) {
              this.userInfo.avatarUrl = response.data
              
              uni.showToast({
                title: '头像更新成功',
                icon: 'success'
              })
            }
            
          } catch (error) {
            console.error('头像上传失败:', error)
            uni.showToast({
              title: error.message || '头像上传失败',
              icon: 'none'
            })
          } finally {
            uni.hideLoading()
          }
        }
      })
    },
    
    goToLogin() {
      uni.navigateTo({
        url: '/pages/auth/login'
      })
    },
    
    goToEditProfile() {
      if (!this.isLoggedIn) {
        this.goToLogin()
        return
      }
      uni.navigateTo({
        url: '/pages/user/edit-profile'
      })
    },
    
    goToIdentity() {
      uni.navigateTo({
        url: '/pages/user/identity'
      })
    },
    
    goToOrders() {
      uni.navigateTo({
        url: '/pages/order/list'
      })
    },
    
    goToOrderDetail(orderId) {
      uni.navigateTo({
        url: `/pages/order/detail?id=${orderId}`
      })
    },
    
    getOrderTagType(status) {
      const typeMap = {
        'CREATED': 'warning',
        'PAID': 'primary',
        'IN_PROGRESS': 'success',
        'COMPLETED': 'success',
        'CANCELLED': 'info'
      }
      return typeMap[status] || 'default'
    },
    
    goToMessage() {
      uni.switchTab({
        url: '/pages/message/list'
      })
    },
    
    goToTeacherApply() {
      uni.navigateTo({
        url: '/pages/teacher/apply'
      })
    },
    
    goToEarnings() {
      uni.navigateTo({
        url: '/pages/teacher/earnings'
      })
    },
    
    goToRatings() {
      uni.navigateTo({
        url: '/pages/teacher/ratings'
      })
    },
    
    goToSchedule() {
      uni.navigateTo({
        url: '/pages/teacher/schedule'
      })
    },
    
    goToFavorites() {
      uni.navigateTo({
        url: '/pages/user/favorites'
      })
    },
    
    changePassword() {
      // 跳转到修改密码页面
      uni.navigateTo({
        url: '/pages/user/change-password'
      })
    },
    
    async submitPasswordChange() {
      if (!this.validatePasswordForm()) {
        return
      }
      
      this.passwordLoading = true
      
      try {
        await changePassword({
          oldPassword: this.passwordForm.oldPassword,
          newPassword: this.passwordForm.newPassword
        })
        
        uni.showToast({
          title: '密码修改成功',
          icon: 'success'
        })
        
        this.showPasswordModal = false
        
        // 清空表单
        this.passwordForm = {
          oldPassword: '',
          newPassword: '',
          confirmPassword: ''
        }
        
      } catch (error) {
        console.error('修改密码失败:', error)
        uni.showToast({
          title: error.message || '修改密码失败',
          icon: 'none'
        })
      } finally {
        this.passwordLoading = false
      }
    },
    
    validatePasswordForm() {
      if (!this.passwordForm.oldPassword) {
        uni.showToast({
          title: '请输入原密码',
          icon: 'none'
        })
        return false
      }
      
      if (!this.passwordForm.newPassword) {
        uni.showToast({
          title: '请输入新密码',
          icon: 'none'
        })
        return false
      }
      
      if (this.passwordForm.newPassword.length < 6 || this.passwordForm.newPassword.length > 20) {
        uni.showToast({
          title: '新密码长度为6-20位',
          icon: 'none'
        })
        return false
      }
      
      if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
        uni.showToast({
          title: '两次密码输入不一致',
          icon: 'none'
        })
        return false
      }
      
      return true
    },
    
    showAbout() {
      uni.showModal({
        title: '关于我们',
        content: '家教平台 v1.0.0\n专业的大学生家教服务平台\n\n致力于为学生和教员搭建安全、便捷的学习交流平台',
        showCancel: false
      })
    },
    
    showFeedback() {
      uni.navigateTo({
        url: '/pages/user/feedback-list'
      })
    },
    
    showPrivacy() {
      uni.showModal({
        title: '隐私政策',
        content: '我们重视您的隐私保护，详细的隐私政策请访问官网查看',
        showCancel: false
      })
    },
    
    formatJoinTime(time) {
      if (!time) return '未知'
      const date = new Date(time)
      return `${date.getFullYear()}年${date.getMonth() + 1}月`
    },
    
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            logout()
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.profile-container {
  background: #f8f9fa;
  min-height: 100vh;
  padding-bottom: 40rpx;
}

.profile-header {
  position: relative;
  background: linear-gradient(135deg, #5daf34 0%, #7cb342 50%, #8bc34a 100%);
  padding: 60rpx 30rpx 40rpx;
  color: white;
  overflow: hidden;
  
  .header-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    
    .bg-circle {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      
      &.circle-1 {
        width: 500rpx;
        height: 500rpx;
        top: -200rpx;
        right: -150rpx;
        animation: float 20s ease-in-out infinite;
      }
      
      &.circle-2 {
        width: 350rpx;
        height: 350rpx;
        bottom: -100rpx;
        left: -100rpx;
        animation: float 15s ease-in-out infinite reverse;
      }
      
      &.circle-3 {
        width: 200rpx;
        height: 200rpx;
        top: 50%;
        left: 50%;
        animation: float 25s ease-in-out infinite;
      }
    }
  }
  
  .user-info {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
    
    .avatar-section {
      position: relative;
      margin-right: 30rpx;
      
      .avatar-badge {
        position: absolute;
        right: -8rpx;
        bottom: -8rpx;
        width: 50rpx;
        height: 50rpx;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 3rpx solid white;
      }
    }
    
    .user-detail {
      flex: 1;
      
      .user-name-row {
        display: flex;
        align-items: center;
        margin-bottom: 12rpx;
        
        .username {
          font-size: 40rpx;
          font-weight: bold;
        }
      }
      
      .mobile {
        display: block;
        font-size: 28rpx;
        opacity: 0.9;
        margin-bottom: 8rpx;
      }
      
      .join-time {
        font-size: 24rpx;
        opacity: 0.8;
      }
    }
  }
  
  .profile-stats {
    position: relative;
    z-index: 2;
    margin-top: 20rpx;
    
    .stats-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: white;
      border-radius: 24rpx;
      padding: 32rpx 24rpx;
      box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
      
      .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12rpx;
        flex: 1;
        
        .stat-icon-wrapper {
          width: 64rpx;
          height: 64rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
        }
        
        .stat-content {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        
        .stat-number {
          font-size: 36rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 8rpx;
        }
        
        .stat-label {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .stat-divider {
        width: 2rpx;
        height: 80rpx;
        background: linear-gradient(to bottom, transparent, #e8e8e8, transparent);
      }
    }
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20rpx) rotate(5deg);
  }
}

.user-info-guest {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
  
  .guest-avatar {
    width: 160rpx;
    height: 160rpx;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30rpx;
    backdrop-filter: blur(10rpx);
  }
  
  .guest-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .guest-title {
      font-size: 48rpx;
      font-weight: bold;
      color: white;
      margin-bottom: 12rpx;
      text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
    }
    
    .guest-subtitle {
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 40rpx;
    }
    
    .login-btn {
      background: white;
      color: #5daf34;
      border: none;
      border-radius: 50rpx;
      padding: 20rpx 80rpx;
      font-size: 30rpx;
      font-weight: bold;
      box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
      transition: all 0.3s;
      
      &:active {
        transform: scale(0.95);
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
      }
    }
  }
}

.quick-actions {
  margin: -30rpx 30rpx 30rpx;
  position: relative;
  z-index: 3;
  
  .action-grid {
    display: flex;
    justify-content: space-between;
    background: white;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
    
    .action-item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      
      .action-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16rpx;
        
        &.order {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        &.message {
          background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }
        
        &.identity {
          background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }
        
        &.earnings {
          background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }
        
        &.favorite {
          background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        }
      }
      
      .action-text {
        font-size: 24rpx;
        color: #333;
        font-weight: 500;
      }
    }
  }
}

.order-section {
  background: white;
  margin: 0 30rpx 24rpx;
  padding: 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
    
    .header-left {
      display: flex;
      align-items: center;
      
      .section-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-left: 16rpx;
      }
    }
    
    .header-right {
      display: flex;
      align-items: center;
      
      .more-text {
        font-size: 26rpx;
        color: #999;
        margin-right: 8rpx;
      }
    }
  }
  
  .order-list {
    .order-card {
      background: #f8f9fa;
      border-radius: 16rpx;
      padding: 24rpx;
      margin-bottom: 16rpx;
      transition: all 0.3s ease;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      &:active {
        transform: scale(0.98);
        background: #f0f2f5;
      }
      
      .order-header {
        margin-bottom: 20rpx;
        
        .order-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .order-no {
            font-size: 26rpx;
            color: #999;
          }
        }
      }
      
      .order-content {
        display: flex;
        align-items: center;
        
        .content-detail {
          flex: 1;
          margin-left: 20rpx;
          
          .teacher-name {
            display: block;
            font-size: 30rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 8rpx;
          }
          
          .subject-info {
            font-size: 26rpx;
            color: #666;
          }
        }
        
        .order-amount {
          text-align: right;
          
          .amount {
            font-size: 32rpx;
            font-weight: bold;
            color: #3cc51f;
          }
        }
      }
    }
  }
  
  .empty-order {
    padding: 80rpx 0;
    text-align: center;
    
    .empty-text {
      display: block;
      margin-top: 24rpx;
      font-size: 28rpx;
      color: #999;
    }
  }
}

.menu-section {
  padding: 0 30rpx;
  
  .menu-group {
    background: white;
    border-radius: 20rpx;
    margin-bottom: 24rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
    
    .group-header {
      display: flex;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid #f5f5f5;
      
      .group-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-left: 16rpx;
      }
    }
    
    .menu-list {
      .menu-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30rpx;
        border-bottom: 1rpx solid #f5f5f5;
        transition: background-color 0.2s ease;
        
        &:last-child {
          border-bottom: none;
        }
        
        &:active {
          background-color: #f8f9fa;
        }
        
        .menu-left {
          display: flex;
          align-items: center;
          
          .menu-text {
            font-size: 30rpx;
            color: #333;
            margin-left: 20rpx;
          }
        }
      }
    }
  }
  
  .logout-section {
    margin-bottom: 40rpx;
  }
}

.password-modal {
  width: 600rpx;
  padding: 40rpx;
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .modal-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .modal-buttons {
    display: flex;
    gap: 20rpx;
    margin-top: 40rpx;
    padding-top: 20rpx;
    border-top: 1rpx solid #f0f0f0;
  }
}
</style> 